import InputBase from '@material-ui/core/InputBase';
import TextField from '@material-ui/core/TextField';
import Badge from '@material-ui/core/Badge';
import ListItem from '@material-ui/core/ListItem';
import { withStyles } from '@material-ui/core/styles';

const LeftBadge = withStyles(theme => ({
    badge: {
        right: 36,
        top: 22,
    },
}))(Badge);

const RtBadge = withStyles(theme => ({
    badge: {
        right: 2,
        color: "black",
        borderWidth: 1,
        borderColor: "#48BB78",     // border-blue-500
        backgroundColor: "white"
    },
}))(Badge);

const RtNum = withStyles(theme => ({
    badge: {
        top: 16,
        right: 2,
        color: "black",
        borderWidth: 1,
        borderColor: "#48BB78",     // border-blue-500
        backgroundColor: "white"
    },
}))(Badge);

const NavItem = withStyles({
    root: {
        "&$selected": {
            backgroundColor: "#cfd8dc",
            color: "black"
        }
    },
    selected: {},
})(ListItem);

const g_style = {
    nested: {
        paddingLeft: 50,
    },
    small: {
        minWidth: 100,
        maxWidth: 200,
        borderWidth: 1,
        borderRadius: 10,
        boxShadow: 'none'
    },
    root: {
        minWidth: 280,
        maxWidth: 480,
        borderWidth: 1,
        borderRadius: 10,
        boxShadow: 'none'
    },
    large: {
        minWidth: 380,
        maxWidth: 880,
        borderWidth: 1,
        borderRadius: 10,
        boxShadow: 'none'
    },
    green: {
        backgroundColor: "#F0FFF4", // bg-green-100
        borderColor: "#48BB78",     // border-green-500
        color: "#22543D"            // text-green-900
    },
    blue: {
        backgroundColor: "#EBF8FF", // bg-blue-100
        borderColor: "#4299E1",     // border-blue-500
        color: "#2A4365"            // text-blue-900
    },
    yellow: {
        backgroundColor: "#fffff0", // bg-yellow-100
        borderColor: "#ecc94b",     // border-yellow-500
        color: "#744210"            // text-yellow-900
    },
    red: {
        backgroundColor: "#fff5f5", // bg-red-100
        borderColor: "#f56565",     // border-red-500
        color: "#742a2a"            // text-red-900
    },
    orange: {
        backgroundColor: "#fffaf0", // bg-orange-100
        borderColor: "#ed8936",     // border-orange-500
        color: "#7b341e"            // text-orange-900
    },
    gray: {
        backgroundColor: "#f7fafc", // bg-gray-100
        borderColor: "#a0aec0",     // border-gray-500
        color: "#1a202c"            // text-gray-900
    },
    greenAvatar: {
        margin: 10,
        color: "#22543D",           // text-green-900
        backgroundColor: "#c6f6d5", // bg-green-200
    },
    deep_blueAvatar: {
        margin: 10,
        color: "white",
        backgroundColor: "#303f9f"
    },
    blueAvatar: {
        margin: 10,
        color: "#2A4365",               // text-blue-900
        backgroundColor: "#BEE3F8"      // bg-blue-200
    },
    yellowAvatar: {
        margin: 10,
        color: "#744210",           // text-yellow-900
        backgroundColor: "#fefcbf", // bg-yellow-200
    },
    redAvatar: {
        margin: 10,
        color: "#742a2a",           // text-red-900
        backgroundColor: "#fed7d7", // bg-red-200
    },
    orangeAvatar: {
        margin: 10,
        color: "#7b341e",           // text-orange-900
        backgroundColor: "#feebc8", // bg-orange-200
    },
    grayAvatar: {
        margin: 10,
        color: "#1A202C",               // text-gray-900
        backgroundColor: "#edf2f7"      // bg-gray-200
    },
};

const cl = '#EDF2F7';   // bg-gray-200

const TextWhite = withStyles({
    root: {
        '& label.Mui-focused': {
            color: cl,
        },
        '& label': {
            color: cl,
        },
        '& .MuiOutlinedInput-root': {
            '& input': {
                color: cl,
            },
            '& fieldset': {
                borderColor: cl,
                color: cl,
            },
            '&:hover fieldset': {
                color: cl,
                borderColor: cl,
            },
            '&.Mui-focused fieldset': {
                color: cl,
                borderColor: cl,
            },
        },
    },
})(TextField);

const WhiteInput = withStyles(theme => ({
    input: {
        borderRadius: 4,
        minWidth: 120,
        padding: '5px 26px 5px 12px',
        backgroundColor: theme.palette.background.paper,
        border: '1px solid #ced4da',
    },
}))(InputBase);

export {RtNum, g_style, WhiteInput, TextWhite, LeftBadge, RtBadge, NavItem};
